<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>二维标签加载_基础</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn-list">
      <div onclick="add()" class="btn">创建迁徙线</div>
      <div onclick="add2()" class="btn">创建迁徙线2</div>
      <div onclick="clearLayer()" class="btn">清除点位</div>
    </div>

    <script type="text/javascript">
      /**
       * 创建文字点位
       */
      const add = () => {
        const coordinates = [
          [8022.360000000001, 4703.7996875, 46],
          [8043.400000000001, 4767.9721875000005, 36]
        ]

        const od = {
          id: 'od', //ODLine唯一标识
          color: [0, 0.2, 1, 1], //填充颜色
          coordinates: coordinates, //构成ODLine的坐标点数组
          lineThickness: 1, //折线宽度
          intensity: 30, //亮度
          bendDegree: 1, //弯曲度

          lineShape: 1, //ODLine模型样式 0:平面 1:柱体，默认值1
          lineStyle: 2, //ODLine材质样式 0:纯色 1:箭头，2:流动点，默认值0
          tiling: 1, //材质贴图平铺比例

          flowRate: 2, //流速
          flowShape: 0, //ODLine发光点样式 0:无 1:球体，默认值0
          flowPointSizeScale: 2, //  运动点的缩放值，默认值20， 单位米

          labelSizeScale: 20, //两端点的缩放值
          startPointShape: 0, //点的样式
          endPointShape: 0, //点的样式
          startLabelShape: 0, //点的样式
          endLabelShape: 0 //点的样式
        }

        __g.odline.add(od)

        __g.camera.set(8100.768125, 4719.418464, 104.830176, -39.359207, -164.07843, 0.000003)
      }

      const add2 = () => {
        // 获取模拟数据
        const data = getOdData()
        let OdArr = []
        let colors = [
          [0, 0.2, 1, 1],
          [0.7, 0.2, 0.1, 1]
        ]
        data.forEach((item, index) => {
          // 根据不同序号给予不同的属性值，这里模拟了两种样式
          let color = index % 2 ? colors[0] : colors[1]
          let lineThickness = index % 2 ? 0.6 : 1
          // 实体线
          let ood = {
            id: 'od_' + index, //ODLine唯一标识
            color: color, //填充颜色
            coordinates: item.coordinates, //构成ODLine的坐标点数组
            flowRate: 0.5, //流速
            intensity: 20, //亮度
            bendDegree: 0.8, //弯曲度
            tiling: 0.8, //材质贴图平铺比例
            lineThickness: lineThickness * 0.8, //折线宽度
            labelSizeScale: 30, //两端点的缩放值
            lineShape: 1, //ODLine模型样式 0:平面 1:柱体，默认值1
            lineStyle: 0, //ODLine材质样式 0:纯色 1:箭头，2:流动点，默认值0
            flowShape: 0, //ODLine发光点样式 0:无 1:球体，默认值0
            startPointShape: 0, //点的样式
            endPointShape: 0, //点的样式
            startLabelShape: 0, //点的样式
            endLabelShape: 0 //点的样式
          }
          // 流动线
          let ood2 = {
            id: 'od2_' + index, //ODLine唯一标识
            color: color, //填充颜色
            coordinates: item.coordinates, //构成ODLine的坐标点数组
            flowRate: 0.5, //流速
            intensity: 500, //亮度
            bendDegree: 0.8, //弯曲度
            tiling: 1, //材质贴图平铺比例
            lineThickness: lineThickness, //折线宽度
            labelSizeScale: 30, //两端点的缩放值
            lineShape: 1, //ODLine模型样式 0:平面 1:柱体，默认值1
            lineStyle: 2, //ODLine材质样式 0:纯色 1:箭头，2:流动点，默认值0
            flowShape: 0, //ODLine发光点样式 0:无 1:球体，默认值0
            startPointShape: 1, //点的样式
            endPointShape: 1, //点的样式
            startLabelShape: 1, //点的样式
            endLabelShape: 1 //点的样式
          }
          // 添加至OD数组中
          OdArr.push(ood)
          OdArr.push(ood2)
        })
        // 添加od
        __g.odline.add(OdArr)
      }

      /**
       * 获取od模拟数据
       */
      const getOdData = () => {
        let resData = []
        const start = {
          name: '七星岗街道',
          coordinate: [7980.64, 4743.56875, 21.6758984375]
        }
        streetCenterData.forEach((end, endIndex) => {
          if (start.name !== end.name) {
            resData.push({
              startName: start.name,
              endName: end.name,
              coordinates: [start.coordinate, end.coordinate]
            })
          }
        })
        return resData
      }

      // 定义街道数据
      const streetCenterData = [
        // {
        //   name: '七星岗街道',
        //   coordinate: [7980.64, 4743.56875, 21.6758984375]
        // },
        {
          name: '解放碑街道',
          coordinate: [7942.2, 4720.57875, 22]
        },
        {
          name: '两路口街道',
          coordinate: [7953.88, 4754.89875, 22]
        },
        {
          name: '上清寺街道',
          coordinate: [7969.320000000001, 4794.6025, 39.2]
        },
        {
          name: '菜园坝街道',
          coordinate: [7971.52, 4708.695625, 21.7]
        },
        {
          name: '南纪门街道',
          coordinate: [8005.320000000001, 4783.6875, 21.7]
        },
        {
          name: '朝天门街道',
          coordinate: [8021.84, 4700.38125, 45.8]
        },
        {
          name: '大溪沟街道',
          coordinate: [8043.320000000001, 4766.06875, 35.8]
        }
      ]

      const clearLayer = () => {
        fdapi.odline.clear()
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {
              fdapi.reset(2 | 4)
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
